// https://threejs.org/docs/index.html#api/zh/geometries/ParametricGeometry
import { 
  Color,
  DoubleSide,
  LineSegments,
  Mesh,
  MeshBasicMaterial,
  PerspectiveCamera, 
  Scene, 
  SphereGeometry, 
  WebGLRenderer, 
  WireframeGeometry, 
  Group,
  Vector3,
  TubeGeometry,
  CatmullRomCurve3,
  ParametricGeometry,
  SpotLight,
  SpotLightHelper,
  MeshPhongMaterial,
  AmbientLight,
} from 'three'
import stats from '../../utils/stats'
import dat from 'dat.gui'
import { ParametricGeometries } from 'three/examples/jsm/geometries/ParametricGeometries'
import { TrackballControls } from 'three/examples/jsm/controls/TrackballControls'

const scene = new Scene()
const camera = new PerspectiveCamera(45, window.innerWidth/window.innerHeight, 0.1, 1000)
camera.position.set(0, 40, 80)
camera.lookAt(0, 0, 0)

const group = new Group()
const geometry = new ParametricGeometry(ParametricGeometries.klein, 30, 30)
const matertial = new MeshPhongMaterial({
  color: 0xff9900,
  transparent: false,
  side: DoubleSide
})
const klein = new Mesh(geometry, matertial)
group.add(klein)
const wireFrame = new WireframeGeometry(geometry)
const wire = new LineSegments(wireFrame)
group.add(wire)

scene.add(group)

const spotLight = new SpotLight(0xffffff)
spotLight.position.set(-40, 60, -10)
scene.add(spotLight)
const ambient = new AmbientLight(0xaaaaaa)
scene.add(ambient)

const controls = {
  animate: true,
  color: matertial.color.getStyle(),
  segments: 10,
}

const gui = new dat.GUI()
gui.add(controls, 'animate')

const renderer = new WebGLRenderer({ antialias: true })
renderer.setPixelRatio(window.devicePixelRatio)
renderer.setSize(window.innerWidth, window.innerHeight)
renderer.setClearColor(0x000000)

document.body.appendChild(renderer.domElement)
const trackballControls = new TrackballControls(camera, renderer.domElement)

function render() {
  stats.update()
  trackballControls.update()

  if (controls.animate) {
    group.rotation.x += 0.01
    group.rotation.y += 0.01
    group.rotation.z += 0.01
  }

  requestAnimationFrame(render)
  renderer.render(scene, camera)
}

render()